<template name="home">
	<view>

		<scroll-view scroll-y class="pages">
			<image src="/static/BasicsBg.png" class="response"></image>

			<view class="page">

				<view class="nav-list">
					<navigator hover-class="none" :url="'/pages/index/' + item.name" class="nav-li" navigateTo
						:class="'bg-'+item.color" :style="[{animation: 'show ' + ((index+1)*0.2+1) + 's 1'}]"
						v-for="(item,index) in elements" :key="index">
						<view class="nav-title">{{item.title}}</view>
						<view class="nav-name">{{item.name}}</view>
						<text :class="'cuIcon-' + item.cuIcon"></text>
					</navigator>
				</view>

			</view>

			<view class="cu-tabbar-height"></view>

		</scroll-view>

	</view>
</template>

<script>
	export default {
		name: "home",
		data() {
			return {
				elements: [{
						title: '签到率',
						name: 'one',
						color: 'cyan',
						cuIcon: 'newsfill'
					},
					{
						title: '签到率',
						name: 'layout',
						color: 'cyan',
						cuIcon: 'newsfill'
					},
					{
						title: '签到率',
						name: 'layout',
						color: 'cyan',
						cuIcon: 'newsfill'
					},
					{
						title: '签到率',
						name: 'layout',
						color: 'cyan',
						cuIcon: 'newsfill'
					},
					{
						title: '签到率',
						name: 'layout',
						color: 'cyan',
						cuIcon: 'newsfill'
					},
					{
						title: '签到率',
						name: 'layout',
						color: 'cyan',
						cuIcon: 'newsfill'
					},
					{
						title: '签到率',
						name: 'layout',
						color: 'cyan',
						cuIcon: 'newsfill'
					},
					{
						title: '签到率',
						name: 'layout',
						color: 'cyan',
						cuIcon: 'newsfill'
					}
				],
			};
		},
		onShow() {
			console.log("success")
		}
	}
</script>

<style scoped>

</style>
